<template>
    <div style="margin-top: 5px;margin-left: 5px">
      <div style="margin-bottom: 10px">
        <el-button @click="dialogVisible = true" type="primary" style="margin-right: 10px">添加学生信息</el-button>
        <el-upload
          style="position: absolute;left: 275px;top: 5px"
          class="upload-demo"
          :on-success="uploadSuccess"
          action="/dev-api/student/batchAdd"
          :limit="1">
          <el-button type="primary">批量导入学生信息</el-button>
        </el-upload>
        <el-button @click="downStus" type="primary">导出学生信息</el-button>
      </div>
      <div>
        <el-table
          :data="students"
          border
          style="width: 100%">
          <el-table-column
            prop="studentName"
            align="center"
            label="学生姓名"
            width="170">
          </el-table-column>
          <el-table-column
            prop="studentSchool"
            align="center"
            label="毕业中学"
            width="170">
          </el-table-column>
          <el-table-column
            prop="studentClass"
            align="center"
            label="班级名称"
            width="170">
          </el-table-column>
          <el-table-column
            prop="studentPhone"
            align="center"
            label="学生电话"
            width="180">
          </el-table-column>
          <el-table-column
            prop="studentQq"
            align="center"
            label="学生QQ"
            width="180">
          </el-table-column>
          <el-table-column
            prop="studnetMajor"
            align="center"
            label="拟报专业"
            width="170">
          </el-table-column>
          <el-table-column
            prop="studentRelation"
            align="center"
            label="是否联系"
            width="170">
            <template slot-scope="scope">
              {{scope.row.studentRelation==1?'已联系':'未联系'}}
            </template>
          </el-table-column>
          <el-table-column
            fixed="right"
            align="center"
            label="操作"
            width="100">
            <template slot-scope="scope">
              <el-button @click="handleDel(scope.row)" type="text" size="small">删除</el-button>
              <el-button type="text" size="small" @click="editStu(scope.row)">编辑</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          style="margin-top: 10px"
          @current-change="currentChange"
          :current-page="currentPage"
          background
          layout="prev, pager, next"
          :total="total">
        </el-pagination>
        <el-dialog
          title="提示"
          @close="dialogVisibleClose"
          :visible.sync="dialogVisible"
          top="10px"
          width="30%">
          <el-form v-model="student">
            <el-form-item label="学生姓名">
              <el-input v-model="student.studentName" style="width: 150px"></el-input>
            </el-form-item>
            <el-form-item label="学生电话">
              <el-input v-model="student.studentPhone" style="width: 150px"></el-input>
            </el-form-item>
            <el-form-item label="学生QQ">
              <el-input v-model="student.studentQq" style="width: 150px"></el-input>
            </el-form-item>
            <el-form-item label="毕业中学">
              <el-input v-model="student.studentSchool" style="width: 150px"></el-input>
            </el-form-item>
            <el-form-item label="班级名称">
              <el-input v-model="student.studentClass" style="width: 150px"></el-input>
            </el-form-item>
            <el-form-item label="拟报专业">
              <el-input v-model="student.studnetMajor" style="width: 150px"></el-input>
            </el-form-item>
            <el-form-item label="是否联系">
              <el-select v-model="studentRelation" placeholder="请选择" style="width: 150px">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="addStu">确 定</el-button>
          </span>
        </el-dialog>
      </div>
    </div>
</template>

<script>
import { initStu, addStu, updateStu, delStu } from '../../../api/stu/stu'

export default {
  data() {
    return {
      studentRelation: '未联系',
      options: [{
        value: false,
        label: '未联系'
      }, {
        value: true,
        label: '已联系'
      }],
      dialogVisible: false,
      total: 100,
      currentPage: 1,
      students: [{
        studentName: '',
        studentPhone: '',
        studentQq: '',
        studentRelation: '',
        studentSchool: '',
        studnetMajor: '',
        studentClass: '',
        studentId: 1
      }],
      student: {
        studentName: '',
        studentPhone: '',
        studentQq: '',
        studentRelation: '',
        studentSchool: '',
        studnetMajor: '',
        studentClass: '',
        studentId: 0
      }
    }
  },
  methods: {
    // 添加学生信息
    addStu() {
      if (typeof(this.studentRelation)==='boolean'){
        this.student.studentRelation = this.studentRelation
      } else {
        this.student.studentRelation = this.studentRelation==='未联系'?false:true
      }
      console.log('1')
      console.log(this.student)
      if (this.student.studentId>0){
        // 修改
        updateStu(this.student).then(response=>{
          console.log(response)
          this.$message({
            message:response.msg,
            type: 'success'
          })
          this.init()
        })
      }else {
        // 增加
        addStu(this.student).then(response=>{
          console.log(response)
          this.$message({
            message:response.msg,
            type: 'success'
          })
          this.init()
        })
      }
      this.dialogVisible = false
    },
    // 批量导入学生信息
    uploadSuccess() {
      this.$message({
        message: '上传成功',
        type: 'success'
      })
      this.init()
    },
    // 导出学生信息
    downStus() {
      window.location.href = "http://106.14.77.197:9999/student/down"
      this.currentChange(1)
    },
    // 获取当前页面数据
    currentChange(page) {
      this.currentPage = page
      this.init()
    },
    // 初始化页面数据
    init() {
      console.log(this.currentPage)
      initStu(this.currentPage).then(response=>{
        console.log(response)
        this.students = response.data.records
        this.total = response.data.total
      })
    },
    // 删除学生数据
    handleDel(row) {
      delStu(row.studentId).then(response=>{
        this.$message({
          message: response.msg,
          type: 'success'
        })
        this.init()
      })
    },
    editStu(row) {
      console.log(row)
      let stu = JSON.stringify(row)
      this.student = JSON.parse(stu)
      this.studentRelation = !row.studentRelation?'未联系':'已联系'
      this.dialogVisible = true
    },
    // 对话框关闭回调
    dialogVisibleClose() {
      this.student = {
        studentName: '',
        studentPhone: '',
        studentQq: '',
        studentRelation: '',
        studentSchool: '',
        studnetMajor: '',
        studentClass: '',
        studentId: 0
      }
      this.studentRelation = '未联系'
    }
  },
  mounted() {
    this.init(1)
  }
}
</script>

<style scoped>

</style>
